<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多级联动</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<select name="cate_name" id="cate_name">
    <option value="">顶级分类</option>
    {foreach $data as $value}
    <option value="{$value.id}">{$value['cate_name']}</option>
    {/foreach}
</select>

<select name="cate_name_two" id="cate_name_two">
    <option value="">二级分类</option>

</select>

<select name="cate_name_three" id="cate_name_three">
    <option value="">三级分类</option>
</select>



<script>
    // 绑定一个内容改变时间
    $('#cate_name').change(function () {
        var pid = $(this).val();
        $.ajax({
            url:'getParentCategory?id='+ pid,
            dataType:'json',
            success:function (result) {

                var str = '';
                $.each(result.data,function (i,v) {
                     str += '<option value="' + v.id + '">'+ v.cate_name +'</option>';
                });
                // 二级分类追加里面
                $('#cate_name_two').append(str);
            }
        })
    })
</script>

</body>
</html>